<template>
  <div class="top-search">
    <!-- 左侧区域：输入框 + 新增按钮（左对齐） -->
    <div class="left-view">
      <el-input
        v-model="input1"
        style="width: 240px"
        size="large"
        placeholder="Search"
        :prefix-icon="Search"
      />
      <button class="btn-base add-btn">新增用户</button>
    </div>
    <div class="right-view">
      <i class="iconfont icon-ling"></i>
      <i class="iconfont icon-a-44tubiao-145"></i>
      <el-avatar :src="userAvatar" />
    </div>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { ref,computed } from 'vue'
// 引入用户存储
import { useUserStore } from '@/stores/user'

const input1 = ref('')
const userStore = useUserStore()

// 计算属性：根据用户角色显示对应头像
const userAvatar = computed(() => {
  // 如果用户有头像，则使用用户头像，否则使用默认头像
  if (userStore.avatar) {
    // 处理不同角色的头像路径
    if (userStore.avatar.includes('icon-admin.png')) {
      return new URL('@/assets/imgs/login/icon-admin.png', import.meta.url).href
    } else if (userStore.avatar.includes('icon-user.png')) {
      return new URL('@/assets/imgs/login/icon-user.png', import.meta.url).href
    }
    return userStore.avatar
  }
  // 默认头像
  return 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
})
</script>

<style scoped lang="scss">
.top-search {
  background-color: rgb(248, 252, 253);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  max-width: 1920px;
  margin: 0 auto;
}

// 左侧区域：内部元素水平排列 + 左对齐
.left-view {
  display: flex;
  /* 确保左侧内部元素垂直居中（与输入框高度匹配） */
  align-items: center;
  /* 左侧内部元素间距 */
  gap: 10px;

  // 穿透修改 Element Plus 输入框样式
  :deep(.el-input__wrapper) {
    border-radius: 20px;
  }

  // 新增按钮样式（可根据实际需求调整）
  .add-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 15px;
    background-color: #409eff;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s;

    &:hover {
      background-color: #66b1ff;
    }
  }
}

// 右侧区域：内部元素水平排列 + 右对齐（本身已被父级推到右侧）
.right-view {
  display: flex;
  /* 右侧内部元素垂直居中 */
  align-items: center;
  /* 右侧内部元素间距（避免挤在一起） */
  gap: 20px;
  /* 图标样式（根据实际图标大小调整） */
  .iconfont {
    font-size: 20px;
    color: #606266;
    cursor: pointer;
    transition: color 0.2s;

    &:hover {
      color: #409eff;
    }
  }

  // 头像大小（根据需求调整）
  :deep(.el-avatar) {
    width: 36px;
    height: 36px;
  }
}
</style>
